<template>
	<div>
		<div class="record_date">
			<el-row>
				<el-col :span="6" class="cards">
				  <div class="box">
					 <div class="box_num">
						 <div class="box_color">赛事总数</div>
						 <div class="text_color"><span>{{competData.count ? competData.count : 0}}</span>场</div>
					 </div>
				  </div>
				</el-col>
				<el-col :span="6" class="cards">
				  <div class="box">
					 <div class="box_num">
						 <div class="box_color">未开始赛事</div>
						 <div class="text_color"><span>{{competData.count1 ? competData.count1 : 0}}</span>场</div>
					 </div>
				  </div>
				</el-col>
				<el-col :span="6" class="cards">
				  <div class="box">
					 <div class="box_num">
						 <div class="box_color">进行中赛事</div>
						 <div class="text_color"><span>{{competData.count2 ? competData.count2 : 0}}</span>场</div>
					 </div>
				  </div>
				</el-col>
				<el-col :span="6" class="cards">
				  <div class="box">
					 <div class="box_num">
						 <div class="box_color">已完成赛事</div>
						 <div class="text_color"><span>{{competData.count3 ? competData.count3 : 0}}</span>场</div>
					 </div>
				  </div>
				</el-col>
			</el-row>
			<div>
				<span style="margin-left:8px;">选择日期:</span>
				<div style="display:inline-block;">
					<el-date-picker
					style="width: 160px;margin-left: 10px;"
					   v-model="info.stockDate"
					   align="right"
					   type="datetime"
					   format="yyyy-MM-dd"
					   value-format="yyyy-MM-dd"
					   placeholder="选择开始时间"
					    @change="animeOrder"
					   >
					 </el-date-picker>
				</div>
				<el-row>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">总用户</div>
							 <div class="text_color"><span>{{userData.count ? userData.count : 0}}</span>人</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">年注册用户</div>
							 <div class="text_color"><span>{{userData.count1 ? userData.count1 : 0}}</span>人</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">月注册用户</div>
							 <div class="text_color"><span>{{userData.count2 ? userData.count2 : 0}}</span>人</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">日注册用户</div>
							 <div class="text_color"><span>{{userData.count3 ? userData.count3 : 0}}</span>人</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">总报名数</div>
							 <div class="text_color"><span>{{applyData.count ? applyData.count : 0}}</span>人</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">年报名数</div>
							 <div class="text_color"><span>{{applyData.count1 ? applyData.count1 : 0}}</span>人</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">月报名数</div>
							 <div class="text_color"><span>{{applyData.count2 ? applyData.count2 : 0}}</span>人</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">日报名数</div>
							 <div class="text_color"><span>{{applyData.count3 ? applyData.count3 : 0}}</span>人</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">订单总数</div>
							 <div class="text_color"><span>{{orderData.sum ? orderData.sum : 0}}</span>件</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">年订单数</div>
							 <div class="text_color"><span>{{orderData.sum0 ? orderData.sum0 : 0}}</span>件</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">月订单数</div>
							 <div class="text_color"><span>{{orderData.sum1 ? orderData.sum1 : 0}}</span>件</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">日订单数</div>
							 <div class="text_color"><span>{{orderData.sum2 ? orderData.sum2 : 0}}</span>件</div>
						 </div>
					  </div>
					</el-col>
				</el-row>
			</div>
			<div>
				<span>明细类型:</span>
				<el-select v-model="type" placeholder="请选择类型" style="width:150px;" @change="partiTrigger(type)">
					<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<span>选择时间:</span>
				<div style="display:inline-block;">
					<el-date-picker
					style="width: 160px;margin-left: 10px;"
					   v-model="info.stockDate"
					   align="right"
					   type="datetime"
					   format="yyyy-MM-dd"
					   value-format="yyyy-MM-dd"
					   placeholder="选择开始时间"
					    @change="animeOrder2"
					   >
					 </el-date-picker>
				</div>
				<el-row>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">总{{partiname}}个数</div>
							 <div class="text_color"><span>{{partData.sum0 ? partData.sum0 : 0}}</span>个</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">年{{partiname}}个数</div>
							 <div class="text_color"><span>{{partData.sum1 ? partData.sum1 : 0}}</span>个</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">月{{partiname}}个数</div>
							 <div class="text_color"><span>{{partData.sum2 ? partData.sum2 : 0}}</span>个</div>
						 </div>
					  </div>
					</el-col>
					<el-col :span="6" class="cards">
					  <div class="box">
						 <div class="box_num">
							 <div class="box_color">日{{partiname}}个数</div>
							 <div class="text_color"><span>{{partData.sum3 ? partData.sum3 : 0}}</span>个</div>
						 </div>
					  </div>
					</el-col>
				</el-row>
			</div>
      <div>
        <span>今日:</span>
        <el-row>
          <el-col :span="6" class="cards">
            <div class="box">
              <div class="box_num">
                <div class="box_color">每日代理人数</div>
                <div class="text_color"><span>{{statisticsData.agent ? statisticsData.agent : 0}}</span>人</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="cards">
            <div class="box">
              <div class="box_num">
                <div class="box_color">会员的开通人数</div>
                <div class="text_color"><span>{{statisticsData.member ? statisticsData.member : 0}}</span>人</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	        return {
				size:5,
				page:1,
				partData:{},
				partiname:'充值',
				type:1,
				types:[
				   {
					   label:'充值',
					   value:1
				   },
				   {
					   label:'报名',
					   value:2
				   },
				   {
					   label:'结算',
					   value:3
				   },
				   {
					   label:'退还',
					   value:4
				   },
				   {
					   label:'转赠',
					   value:6
				   },
				   {
					   label:'接受转赠',
					   value:7
				   },
				   {
					   label:'金币兑换钻石',
					   value:8
				   },
				   {
					   label:'钻石兑换金币',
					   value:9
				   }
				],
				userData:{},
				competData:{},
				applyData:{},
				orderData:{},
        statisticsData:{},
				info: {
					stockDate:this.getNowTime(),  //日期
				}
	        }
	    },
		filters: {
		  numFilter (value) {
		    let realVal = ''
		    if (!isNaN(value) && value!== '') {
		      // 截取当前数据到小数点后两位
		      realVal = parseFloat(value).toFixed(2)
		    } else {
		      realVal = '--'
		    }
		    return realVal
		  }
		},
		mounted() {
		   this.userSelect()
		   this.applySelect()
		   this.competSelect()
		   this.orderSelect()
		   this.partSelect()
      this.getStatistics()
		},
	    methods: {
			// 订单分析选择日期
			animeOrder(){
				this.userSelect()
				this.applySelect()
			},
			animeOrder2(){
				this.partSelect()
			},
			//处理默认选中当前日期
			getNowTime() {
				 var now = new Date();
				 var year = now.getFullYear(); //得到年份
				 var month = now.getMonth(); //得到月份
				 var date = now.getDate(); //得到日期
				 month = month + 1;
				 month = month.toString().padStart(2, "0");
				 date = date.toString().padStart(2, "0");
				 var defaultDate = `${year}-${month}-${date}`;
				 return defaultDate;
				 this.$set(this.info, "stockDate", defaultDate);
			},

		   //用户数据
		   userSelect(){
			  this.$http({
				url: this.$http.adornUrl2('/statistics/user'),
				method: 'get',
				params: this.$http.adornParams({
					'date':this.info.stockDate,
				})
			  }).then(({data}) => {
				let returnData = data.data;
				this.userData = returnData
			  })
		   },
		   //报名数据
		   applySelect(){
			  this.$http({
				url: this.$http.adornUrl2('/statistics/gameApply'),
				method: 'get',
				params: this.$http.adornParams({
					'date':this.info.stockDate,
				})
			  }).then(({data}) => {
				let returnData = data.data;
				this.applyData = returnData
			  })
		   },
		   partiTrigger(val){
			   console.log(val)
			   if(val==1){
				 this.partiname = '充值'
			   }
			   if(val==2){
			   	this.partiname = '报名'
			   }
			   if(val==3){
			   	this.partiname = '结算'
			   }
			   if(val==4){
			   	this.partiname = '退还'
			   }
			   if(val==6){
			   	this.partiname = '转增'
			   }
			   if(val==7){
			   	this.partiname = '接受转赠'
			   }
			   if(val==8){
			   	this.partiname = '金币兑换钻石'
			   }
			   if(val==9){
			   	this.partiname = '钻石兑换金币'
			   }
			   this.partSelect()
		   },
		   //钻石明细
		   partSelect(){
			  this.$http({
				url: this.$http.adornUrl2('/statistics/userMoneyDetails'),
				method: 'get',
				params: this.$http.adornParams({
					'date':this.info.stockDate,
					'type':this.type
				})
			  }).then(({data}) => {
				let returnData = data.data;
				this.partData = returnData
			  })
		   },
		   //赛事数据
		   competSelect(){
			  this.$http({
				url: this.$http.adornUrl2('/statistics/gameEvent'),
				method: 'get',
				params: this.$http.adornParams({
				})
			  }).then(({data}) => {
				let returnData = data.data;
				this.competData = returnData
			  })
		   },
		   //订单数据
		   orderSelect(){
			  this.$http({
				url: this.$http.adornUrl2('/orders/statistical'),
				method: 'get',
				params: this.$http.adornParams({
					'data':this.info.stockDate,
				})
			  }).then(({data}) => {
				let returnData = data.data;
				this.orderData = returnData
			  })
		   },
        // 每日代理和会员的开通人数
        getStatistics(){
          this.$http({
            url: this.$http.adornUrl2('/statistics/dayNum'),
            method: 'get',
            params: this.$http.adornParams({})
          }).then(({data}) => {
            let returnData = data.data;
            console.log(returnData,'l99999999999')
            this.statisticsData = returnData
          })
        }
		}
	}
</script>

<style scoped>
	.box{
		padding: 24px;
		border: 1px solid #eee;
		margin: 15px 10px;
	}
	.box_num{
		font-size: 14px;
		color: #66b1ff;
	}
	.box_num .box_color{
		color: #333;
		font-size: 14px;
		margin-bottom: 15px;
	}
	.box_num div span{
		font-size: 20px;
		margin-left: 5px;
	}
	.text_color{
		color: #4f9dec;
	}
	.text_color span{
		margin-right: 5px;
	}
</style>
